<template>
  <div>
    <Container>
      <el-row :gutter="30">
        <el-col :md="6">
          <MainPhoto />
          <MainContact class="mt-20px" />
        </el-col>
        <el-col :md="18">
          <el-row class="bg-white p-10px">
            <el-col :md="24" class="breadcrumb p-10px">
              <span>当前位置：</span>
              <el-breadcrumb style="display: inline-block">
                <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{ category_name }}</el-breadcrumb-item>
              </el-breadcrumb>
            </el-col>
            <el-col :md="24" class="mt-10px">
              <MainListComponent :category_id="category_id" />
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </Container>
  </div>
</template>

<script setup lang="ts">
const route = useRoute();
let id = route.params.id;
if (Array.isArray(id)) {
  id = id[0];
}
const category_id = ref<string>(id);
const category_name = ref<string>('');
const categories = useCategories();
const categories_list = categories.categories;

const findCateName = async (category_id: number) => {
  for (let cate of categories_list) {
    if (cate.id === category_id) {
      return cate.name;
    }
  }
  return '';
};
onMounted(async () => {
  category_name.value = await findCateName(Number(category_id.value));
});
</script>

<style scoped>
.breadcrumb {
  background-color: #f5f5f5;
}
</style>
